<template>
	<ul>
		<li>
			<ynet-button @click="showPopUp('center')">屏幕中弹出</ynet-button>
			<ynet-popup v-model="isPopupShow.center">
				<div class="md-example-popup md-example-popup-center">
					Popup Center
				</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp('top')">顶部弹出</ynet-button>
			<ynet-popup v-model="isPopupShow.top" :hasMask="false" position="top">
				<div class="md-example-popup md-example-popup-top">
					Popup Top
					<ynet-icon name="close" @click.native="hidePopUp('top')"></ynet-icon>
				</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp('bottom')">底部弹出</ynet-button>
			<ynet-popup v-model="isPopupShow.bottom" position="bottom">
				<ynet-popup-title-bar
					title="Popup Title"
					describe="Popup Description"
					ok-text="ok"
					cancel-text="cancel"
					large-radius
					@confirm="hidePopUp('bottom')"
					@cancel="hidePopUp('bottom')"
				></ynet-popup-title-bar>
				<div class="md-example-popup md-example-popup-bottom">
					dddddddddddddddddddddddddddddddddddddddddddddddd
				</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp('left')">左侧弹出</ynet-button>
			<ynet-popup v-model="isPopupShow.left" position="left">
				<div class="md-example-popup md-example-popup-left">
					Popup Left
				</div>
			</ynet-popup>
		</li>
		<li>
			<ynet-button @click="showPopUp('right')">右侧弹出</ynet-button>
			<ynet-popup v-model="isPopupShow.right" position="right">
				<div class="md-example-popup md-example-popup-right">
					Popup Right
				</div>
			</ynet-popup>
		</li>
	</ul>
</template>
<script>
	import { Popup, PopupTitleBar, Button, Icon } from 'ynet-mobile'
	export default {
		title: '不同位置',
		name: 'popup-demo',
		components: {
			[Popup.name]: Popup,
			[Button.name]: Button,
			[Icon.name]: Icon,
			[PopupTitleBar.name]: PopupTitleBar
		},
		data(){
			return {
				isPopupShow: {}
			}
		},
		methods: {
			showPopUp(type){
				this.$set(this.isPopupShow, type, true)
			},
			hidePopUp(type){
				this.$set(this.isPopupShow, type, false)
			}
		}
	}
</script>
<style lang="scss">
	.md-example-popup{
		position: relative;
		font-size: 36px;
		font-weight: 500;
		box-sizing: border-box;
		text-align: center;
		background-color: #FFF;
	}
	.md-example-popup-center{
		padding: 50px;
		border-radius: 10px;
	}
	.md-example-popup-top{
		width: 100%;
		height: 85px;
		line-height: 85px;
		background: #4a4c5b;
		color: #fff;
		.md-icon{
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.md-example-popup-left, .md-example-popup-right{
		height: 100%;
		padding: 0 150px;
		display: flex;
		align-items: center
	}
	.md-example-popup-bottom{
		width: 100%;
		padding: 100px 0;
		p{
			line-height: 50px
		}
	}
</style>